<template>
  <view class="org-list">
    <view class="path-box">
      当前位置：
      <view v-for="item in currPathList" :key="item.key" class="path-item" @click="enterByPath(item)">
        {{ item.name }}
      </view>
    </view>
    <view v-if="!currList.length" class="no-content">暂无数据</view>
    <view v-if="isProjectView" class="project list-box">
      <view class="project-item" v-for="item in currList" :key="item.key" :class="{ offline: !item.online }" @click="toProjectDetail(item)">
        <image class="item-bg" src="/static/image/project-item-bg.png"></image>
        <view class="project-info">
          <arprogress class="rate-box" :inactiveColor="item.processInactiveColor" :activeColor="item.processActiveColor" :borderWidth="8" :width="120" :percent="item.savingRate">
            <view class="rate-text">
              <view class="progress-rate">
                {{ item.savingRate }}
                <text class="rate-unit">%</text>
              </view>
              <view class="progress-text">节能率</view>
            </view>
          </arprogress>
          <view class="info-box">
            <view class="name-box">
              <view class="project-name">{{ item.name }}</view>
              <view class="warning-box">
                <text class="iconfont icon-warning-fill"></text>
                <text>故障: {{ item.lampWarningCount }}</text>
              </view>
            </view>
            <view class="location-info">{{ item.locationInfo }}</view>
            <view class="admin-info">
              <view class="admin-name">{{ item.userName }}</view>
              <view class="admin-phone">{{ item.phoneShow }}</view>
            </view>
          </view>
        </view>
        <view class="lamp-info">
          <view class="info-item power-total">
            <view class="item-count">{{ item.totalPower }}</view>
            <view class="item-label">
              累计用电
              <text class="small">(Kwh)</text>
            </view>
          </view>
          <view class="info-item power-saving">
            <view class="item-count">{{ item.savingPower }}</view>
            <view class="item-label">
              累计节电
              <text class="small">(Kwh)</text>
            </view>
          </view>
          <view class="info-item error-count">
            <view class="item-count">{{ item.lampErrorCount }}</view>
            <view class="item-label">故障数</view>
          </view>
          <view class="info-item lamp-count">
            <view class="item-count">{{ item.lampTotalCount }}</view>
            <view class="item-label">灯具数</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="org list-box">
      <view v-for="item in currList" :key="item.key" class="org-item" @click="enterOrg(item)">
        <view class="title-box">
          <view class="title">
            <i class="iconfont icon-city-fill"/>
            {{ item.name }}
          </view>
          <view class="time">{{ item.modifyTime }}</view>
        </view>
        <view class="info-box">
          <view class="info-item">
            <view class="count">{{ item.projectCount }}</view>
            <view class="name">项目数量</view>
          </view>
          <view class="info-item">
            <view class="count">{{ item.lampCount }}</view>
            <view class="name">灯具数量</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import { formatPhone, fixedDecimal, formatDate } from '@/utils/index.js'
import color from '@/envs/_/variables.scss'
import arprogress from '@/components/ar-circle-progress/index.vue'
export default {
  components: {
    arprogress
  },
  mixins: [mixin],
  data() {
    return {
      isProjectView: false,
      orgMap: {},
      currList: [],
      currOrg: null,
      currPathList: []
    }
  },
  methods: {
    refresh() {
      this.isProjectView = false
      this.currList = []
      this.currPathList = []
      this.currOrg = null
      this.getOrgList()
    },
    getOrgList() {
      const self = this
      self.orgMap = {};
      self.currList = [];
      uni.request({
        url: '/department/search',
        data: {
          key: '',
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data) && result.data.data.length) {
            result.data.data.sort((left, right) => left.level - right.level);
            const rootList = [];
            result.data.data.forEach((item) => {
              self.orgMap[item.id] = item;
              item.key = item.id;
              item.children = [];
              item.projectCount = Math.floor(item._project_count) || 0;
              item.lampCount = Math.floor(item._node_count) || 0;
              item.modifyTime = formatDate(item.modify_time, 'yyyy-MM-dd')
              if (self.orgMap[item.fid]) {
                self.orgMap[item.fid].children.push(item);
              }
              if (item.fid === 0) {
                rootList.push(item);
              }
            });
            self.currOrg = self.orgMap[self.userInfo.department_id];
            self.currPathList.push(self.currOrg);
            self.currList =  self.currOrg.children;
          }
        }
      })
    },
    getOrgProjectList(target) {
      const self = this
      self.currList = [];
      uni.request({
        url: '/department/projectlist',
        data: {
          department_id: target.id,
        },
        success(result) {
          if (result.data.success && Array.isArray(result.data.data) && result.data.data.length) {
            const arr = [];
            result.data.data.forEach(item => {
              const projectItem = {
                processInactiveColor: color.successLight,
                processActiveColor: color.success,
                key: item.id,
                projectId: item.id,
                name: item.name || '',
                locationInfo: item.address || '',
                userName: item.user_name || '',
                phone: item.phone || '',
                phoneShow: formatPhone(item.phone),
                totalPower: fixedDecimal(item._KWh, 2) || 0,
                savingRate: fixedDecimal(item._rate, 2) || 0,
                lampTotalCount: Math.ceil(item._node_count) || 0,
                lampErrorCount: Math.ceil(item._error_count) || 0,
                lampWarningCount: Math.ceil(item._warning_count) || 0,
                online: !!item.online
              }
              projectItem.savingPower =  fixedDecimal((projectItem.totalPower * projectItem.savingRate) / (100 - projectItem.savingRate), 2)
              if (projectItem.lampWarningCount > 99) {
                projectItem.lampWarningCount = '99+'
              }
              if (!projectItem.online) {
                projectItem.processInactiveColor = color.background
                projectItem.processActiveColor = color.backgroundDark
              }
              arr.push(projectItem)
            })
            self.currList = arr;
          }
        }
      })
    },
    enterByPath(target) {
      if (this.currOrg === target) return;
      this.isProjectView = false;
      this.currPathList = this.currPathList.slice(0, this.currPathList.indexOf(target) + 1);
      this.currList = target.children;
    },
    enterOrg(target) {
      this.currOrg = target;
      this.currPathList.push(target);
      if (target.children.length) {
        this.isProjectView = false;
        this.currList = target.children;
      } else {
        this.isProjectView = true;
        this.getOrgProjectList(target);
      }
    },
    toProjectDetail(project) {
      uni.navigateTo({
        url: `/pages/project-detail/index/index?id=${project.projectId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.path-box {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: $text-base;
  flex-wrap: wrap;
  .path-item {
    &::after {
      content: '>';
      margin: 0 6rpx;
    }
    &:last-child {
      color: $primary;
      &::after {
        content: none;
      }
    }
  }
}
.list-box {
  margin-top: 20rpx;
}
.org-item {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  &:first-child {
    margin-top: 0;
  }
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 34rpx;
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 40rpx;
        color: $primary;
        margin-right: 10rpx;
      }
    }
    .time {
      font-size: 24rpx;
      color: $text-base;
    }
  }
  .info-box {
    margin-top: 20rpx;
    background-color: rgba($primary, 0.05);
    border-radius: 10rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .info-item {
      text-align: center;
    }
    .count {
      color: $text-main;
      font-size: 32rpx;
    }
    .name {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: $text-base;
    }
  }
}
</style>
